<template>
  <div id="app">
    <vue-particles
        class="login-bg"
        color="#f4f4f4"
        :particleOpacity="0.7"
        :particlesNumber="50"
        shapeType="circle"
        :particleSize="4"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="1"
        :hoverEffect="false"
        hoverMode="grab"
        :clickEffect="false"
        clickMode="push"
    />
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

<script>
export default {
  name: "App",
  provide() {
    return {
      reload: this.reload,
      openLoad: this.openFullScreen,
      closeLoad: this.closeFullScreen
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
    openFullScreen() {
      return this.$loading({
        lock: true,
        text: '加载中，请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    closeFullScreen() {
      this.openFullScreen().close();
    },
  },
}
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  margin: -0.9vh -0.4vw;
  overflow-y: scroll;
  background: #2c3e50;
}

.login-bg {
  width: 100%;
  height: 99%;
  position: absolute;
}


::-webkit-scrollbar {
  width: 0 !important;
}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>
